
<template>
  <!-- 产品-销售计划 -->
  <div class="CpsalesPlan">
    <div class="incolumn_countr">
      <div class="search-box">
        <hy-search
          ref="query"
          :searchTitle="searchTitle"
          v-model="searcher"
          :button="{btnShowBy3:true}"
          :buttonText="{btnNameBy3:'新增图纸'}"
          :col="6"
          @search="search"
          @clickbybtn3="jump"
        ></hy-search>
      </div>
    </div>
    <div class="table-box">
      <template>
        <el-table
          :data="tableData"
          style="width:100%"
          stripe
          :height="autoHeightTable "
          show-overflow-tooltip
          @filter-change="handleFilterChange"
        >
          <el-table-column prop="xuhao" label="序号" width="100" align="center"></el-table-column>
          <el-table-column prop="syear" label="上传时间" align="center"></el-table-column>
          <el-table-column
            prop="TypeStr"
            align="center"
            :label="label"
            width="200"
            :filter-multiple="false"
            :filters="newlist"
            column-key="TypeStr"
          ></el-table-column>
          <el-table-column prop="plannums" label="图纸编号" align="center"></el-table-column>
          <el-table-column prop="factums" label="图纸名称" align="center"></el-table-column>
          <el-table-column prop="createon" label="上传者" align="center"></el-table-column>
          <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
              <el-button type="warning" size="mini" @click="ChaKan(scope.row)">编辑</el-button>
              <el-button type="primary" size="mini" @click="salesDetail(scope.row.planno)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <template>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </template>

    <!-- 查看 弹框 销售计划表格 -->
    <el-dialog
      title="销售计划"
      :visible.sync="dialogVisibles"
      width="80%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="color_box"></div>
      <div class="from_sex">
        <el-row :gutter="5">
          <el-col :span="4">
            <el-form :model="formInline" class="demo-form-inline" label-width="83px">
              <el-form-item label="计划年份">
                <el-input v-model="formInline.month"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="4">
            <el-form :model="formInline" class="demo-form-inline" label-width="83px">
              <el-form-item label="计划月份">
                <el-input v-model="formInline.year"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="4">
            <el-form :model="formInline" class="demo-form-inline" label-width="83px">
              <el-form-item label="编号">
                <el-input v-model="formInline.planno"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <div class="from_btn">
            <el-button type="warning" size="mini" @click="dialogVisible=true">周计划</el-button>
          </div>
        </el-row>
      </div>

      <div class="eltable">
        <div class="addplan_table">
          <template>
            <el-table :data="tableData_1">
              <el-table-column type="index" label="序号" prop="xuhao" align="center" width="79"></el-table-column>
              <el-table-column label="主机厂" align="center" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.main"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="产品图号" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.pic"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="产品名称" align="center" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="f" label="销量需求" align="center" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.need"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="需求时间及数量" align="center">
                <el-table-column prop="one" label="1" align="center" width="30"></el-table-column>
                <el-table-column prop="two" label="2" align="center" width="30"></el-table-column>
                <el-table-column prop="three" label="3" align="center" width="30"></el-table-column>
                <el-table-column prop="four" label="4" align="center" width="30"></el-table-column>
                <el-table-column prop="five" label="5" align="center" width="30"></el-table-column>
                <el-table-column prop="six" label="6" align="center" width="30"></el-table-column>
                <el-table-column prop="seven" label="7" align="center" width="30"></el-table-column>
                <el-table-column prop="eight" label="8" align="center" width="30"></el-table-column>
                <el-table-column prop="nine" label="9" align="center" width="30"></el-table-column>
                <el-table-column prop="ten" label="10" align="center" width="30"></el-table-column>
                <el-table-column prop="eleven" label="11" align="center" width="30"></el-table-column>
                <el-table-column prop="twelve" label="12" align="center" width="30"></el-table-column>
                <el-table-column prop="thirteen" label="13" align="center" width="30"></el-table-column>
                <el-table-column prop="fourteen" label="14" align="center" width="30"></el-table-column>
                <el-table-column prop="fifteen" label="15" align="center" width="30"></el-table-column>
                <el-table-column prop="sixteen" label="16" align="center" width="30"></el-table-column>
                <el-table-column prop="seventeen" label="17" align="center" width="30"></el-table-column>
                <el-table-column prop="eighteen" label="18" align="center" width="30"></el-table-column>
                <el-table-column prop="nineteen" label="19" align="center" width="30"></el-table-column>
                <el-table-column prop="twenty" label="20" align="center" width="30"></el-table-column>
                <el-table-column prop="twenty-one" label="21" align="center" width="30"></el-table-column>
                <el-table-column prop="twenty-two" label="22" align="center" width="30"></el-table-column>
                <el-table-column prop="twenty-three" label="23" align="center" width="30"></el-table-column>
                <el-table-column prop="twenty-four" label="24" align="center" width="30"></el-table-column>
                <el-table-column prop="twenty-five" label="25" align="center" width="30"></el-table-column>
                <el-table-column prop="twenty-six" label="26" align="center" width="30"></el-table-column>
                <el-table-column prop="twenty-seven" label="27" align="center" width="30"></el-table-column>
                <el-table-column prop="twenty-eight" label="28" align="center" width="30"></el-table-column>
                <el-table-column prop="twenty-nine" label="29" align="center" width="30"></el-table-column>
                <el-table-column prop="thirty" label="30" align="center" width="30"></el-table-column>
              </el-table-column>
              <el-table-column prop="sum" label="本月合计" align="center" width="120"></el-table-column>
              <el-table-column prop="note" label="备注" align="center" width="100"></el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <div class="footer">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="medium" @click="dialogVisibles=false">确认</el-button>
          <el-button size="medium" type="info" @click="dialogVisibles=false">取消</el-button>
        </span>
      </div>
    </el-dialog>
    <!-- end -->

    <!-- 周计划弹框 -->
    <el-dialog
      title
      :visible.sync="dialogVisible"
      width="60%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="table_dia">
        <el-table :data="tableDatas" border>
          <el-table-column prop="first" label="第一周(2日-8日)" align="center"></el-table-column>
          <el-table-column prop="second" label="第二周(9日-15日)" align="center"></el-table-column>
          <el-table-column prop="third" label="第三周(16日-22日)" align="center"></el-table-column>
          <el-table-column prop="fourth" label="第四周(22日-23日)" align="center"></el-table-column>
          <el-table-column prop="fifth" label="第五周(24日-30日)" align="center"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- end -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 78;
    }
  },
  data() {
    return {
      newlist: [
        { text: "成品", value: 1 },
        { text: "半成品", value: 2 },
        { text: "原料", value: 3 }
      ],
      label: "成品",
      total: 1,
      current: 1,
      pagesize: 11,

      dialogVisibles: false,
      searchTitle: [
        {
          type: "input",
          name: "customProductName",
          label: "输入搜索",
          placeholder: "请输入销售计划",
          prop: "customProductName"
        },

        {
          type: "date2",
          name: "issuanceDate",
          label: "输入时间",
          placeholder: "请选择输入时间",
          prop: "issuanceDate"
        }
      ],
      searcher: {
        customProductName: "",
        customProductNo: "",
        issuanceDate: ""
      },
      tableData: [
        {
          syear: "",
          smonyh: "",
          states: ""
        }
      ],
      dialogVisible: false,
      tableData_1: [
        {
          xuhao: "1"
        }
      ],
      tableDatas: [],
      formInline: {
        year: "",
        month: "",
        planno: ""
      }
    };
  },
  created() {
    this.empno = JSON.parse(localStorage.getItem("empno"));
    this.getData(0);
    //  this.getDatas();
  },
  methods: {
    // 首页列表数据
    getData(page) {
      var obj = {
        pn: page,
        PerPageSize: 11,
        key: this.searcher.customProductName
          ? this.searcher.customProductName
          : "",
        start: this.searcher.issuanceDate[0]
          ? this.searcher.issuanceDate[0]
          : "",
        end: this.searcher.issuanceDate[1] ? this.searcher.issuanceDate[1] : ""
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PurchasingManagement.asmx/List_Purchasing?index=5&jsondata=" +
          objs +
          "&empno=" +
          this.empno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        var lists = JSON.parse(datas.string.__text);
        console.log(lists);
        for (var i = 0; i < lists.length; i++) {
          lists[i].planno = lists[i].x.planno;
          lists[i].createon = lists[i].x.createon;
          lists[i].plannums = lists[i].x.plannums;
          lists[i].factnums = lists[i].x.factnums;
          lists[i].preparename = lists[i].x.preparename;
        }

        for (var i = 0; i < lists.length; i++) {
          if (lists[i].createon === null) {
            this.createon == "";
          } else {
            var ddd = new Date(parseInt(lists[i].createon.substr(6, 13)));
            var y = ddd.getFullYear();
            var m = ddd.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = ddd.getDate();
            d = d < 10 ? "0" + d : d;
            lists[i].createon = y + "-" + m + "-" + d;
            lists[i].xuhao = 1 + i + 11 * page;
          }
        }
        this.tableData = [];
        this.tableData = lists;
      });
    },
    //总页数
    getDatas() {
      var obj = {
        pn: 0,
        PerPageSize: 1000,
        key: "",
        start: "",
        end: ""
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PurchasingManagement.asmx/List_Purchasing?index=5&jsondata=" +
          objs +
          "&empno=" +
          this.empno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var lists = JSON.parse(datas.string.__text);
        console.log(list);
        this.total = list.length;
      });
    },
    // 表头下拉筛选
    handleFilterChange(filters) {
      var arr = filters.TypeStr[0];
      // console.log(filters.name[0]);

      if (arr == undefined) {
        arr = 0;
      }
      if (arr == 1) {
        this.label = "成品";
      } else if (arr == 2) {
        this.label = "半成品";
      } else if (arr == 3) {
        this.label = "原料";
      }
    },
    // 新增图纸
    jump() {
      this.$router.push("./SalesDetail");
    },
    //筛选
    search() {
      this.getData(0);

      var obj = {
        start: "",
        end: "",
        pn: 0,
        PerPageSize: 10000,
        key: this.searcher.customProductName
          ? this.searcher.customProductName
          : null,
        start: this.searcher.issuanceDate[0]
          ? this.searcher.issuanceDate[0]
          : "",
        end: this.searcher.issuanceDate[1] ? this.searcher.issuanceDate[1] : ""
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PurchasingManagement.asmx/List_Purchasing?index=5&jsondata=" +
          objs +
          "&empno=" +
          this.empno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        var lists = JSON.parse(datas.int.__text);
        console.log(lists);
        this.total = lists;
      });
    },
    //查看
    ChaKan(e) {
      this.$router.push({ path: "./SalesDetail", query: { id: e } });
    },
    //详情
    salesDetail(planno) {
      var id = "";
      this.$router.push({ path: "./SalesDetail", query: { id: planno } });
    },
    // 分页
    handleCurrentChange(e) {
      this.getData(e - 1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.incolumn_countr {
  width: 97%;
}
.table-box {
  width: 98%;
  margin-left: 15px;
}
.el-pagination {
  margin-top: 15px;
  text-align: center;
}

.addplan_table {
  margin-top: 30px;
  width: 95%;
  margin-left: 30px;
  margin-bottom: 30px;
}
.eltable {
  border-bottom: 1px solid $bordercolor;
}

.color_box {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  position: absolute;
  top: 22px;
  left: 10px;
}
.footer {
  margin-left: 45%;
  margin-top: 20px;
}
.from_sex {
  margin-top: 20px;
}
.from_btn {
  margin-left: 90%;
}
</style>
<style >
/* .addplan_title  .el-input__inner{
    background: rgba(242, 242, 242, 1);
 border-color: rgba(220, 222, 226, 1);
}
.el-input__inner:hover{
    border-color: rgba(128,134,149,1)
} */
.addplan_table .el-input__inner {
  background: rgba(242, 242, 242, 1);
  border-color: rgba(220, 222, 226, 1);
  width: 90%;
  height: 35px;
  text-align: center;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 13px;
  color: #333;
}
.addplan_table .el-input__inner:hover {
  border-color: rgba(128, 134, 149, 1);
}
.addplan_table .el-table thead.is-group th {
  background: none;
  color: #333;
}
.addplan_table .el-table th > .cell {
  text-align: center;
  padding: 0;
}

.addplan_table .el-table td,
.el-table th {
  padding: 0;
  height: 45px;
}
.addplan_table .el-table .cell,
.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell {
  padding: 0;
}
.table_dia .el-table th {
  background: rgba(242, 242, 242, 1);
  color: #333;
  height: 25px;
}
</style>

